<template>
    <div ref="chart" :style="{ width: width, height: height , border:bord , background:bgc}" class="chart_box"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { watch, onMounted, ref } from 'vue';
const { width, height, option } = defineProps({
    width: {
        type: String,
        default: "100%"
    },
    height: {
        type: String,
        default: "100%"
    },
    option: {
        type: Object,
    },
    bgc:{
        type:String,
        default:'linear-gradient(180deg, rgba(33, 88, 148, 0.10) 0%, #215894 100%)'
    },
    bord:{
        type:String,
        default:'1px solid rgba(21, 63, 109, 0.80)'
    }
})
const chart = ref()
var myChart
onMounted(() => {
    myChart = echarts.init(chart.value);
    if (option) {
        myChart.setOption(option);
    }
    window.addEventListener("resize", () => {
        myChart.resize();
    });
})
watch(option, (newOption) => {
    if (myChart) {
        myChart.setOption(option);
    }
}, { deep: true });
</script>

<style scoped>
.chart_box {
    /* border: 1px solid rgba(21, 63, 109, 0.80); */
    /* background: linear-gradient(180deg, rgba(33, 88, 148, 0.10) 0%, #215894 100%); */
}
</style>